import { createBrowserRouter, Navigate } from "react-router-dom";
import { Suspense, lazy } from "react";
import Main from "../pages/main"; // 主布局组件可以提前加载

// 使用 React.lazy 动态导入组件
const Home = lazy(() => import("../pages/home"));
const Mall = lazy(() => import("../pages/mall"));
const User = lazy(() => import("../pages/user"));
const PageTwo = lazy(() => import("../pages/other/pageTwo"));
const PageOne = lazy(() => import("../pages/other/pageOne"));

const routes = [
  {
    path: "/",
    element: <Main />,
    children: [
      // 路由重定向
      {
        path: "/",
        element: <Navigate to={"/home"} replace />,
      },
      {
        path: "home", // 注意：子路由路径不需要以斜杠开头
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <Home />
          </Suspense>
        ),
      },
      {
        path: "user",
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <User />
          </Suspense>
        ),
      },
      {
        path: "mall",
        element: (
          <Suspense fallback={<div>Loading...</div>}>
            <Mall />
          </Suspense>
        ),
      },
      {
        path: "other",
        children:[{
          path: "pageOne",
          element: (
            <Suspense fallback={<div>Loading...</div>}>
              <PageOne />
            </Suspense>
          )
        },{
          path: "pageTwo",
          element: (
            <Suspense fallback={<div>Loading...</div>}>
              <PageTwo />
            </Suspense>
          )
        }]
      }
    ],
  },
];

export default createBrowserRouter(routes);